<template>
    <div class="module-box">
        <!-- 一行5等分 -->
        <div class="box" style="flex:0 1 20%;" v-for="v in lists" :key="v.icon">
            <div class="list-box">
                <i><el-icon><component :is="v.icon"></component></el-icon></i>
                <p>{{v.title}}</p>
            </div>
        </div>
    </div>

    <div class="module-box">
        <!-- 一行2等分 -->
        <div class="box" style="flex:0 1 30%;margin:5px;">
            <el-card class="box-card">
                <!-- 图表 -->
                <Chart height="250px" :option="chartOption1"/>
            </el-card>
        </div>

         <div class="box" style="flex:0 1 70%;margin:5px;">
            <el-card class="box-card"> 
                <!-- 图表 -->
                <Chart height="250px" :option="chartOption2"/>
            </el-card>
        </div>
    </div>

    <div class="module-box">
        <!-- 一行1等分 -->
        <div class="box" style="flex:0 1 100%;margin:5px;">
            <el-card class="box-card"> 
                <!-- 图表 -->
                <Chart height="300px" :option="chartOption3"/>
            </el-card>
        </div>
    </div>

  
</template>

<script setup>
import {onMounted, reactive,ref} from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  PictureFilled
} from '@element-plus/icons-vue'
import Chart from './chart.vue'

const lists = ref([
    {title:'电量监控1',icon:Document},
    {title:'电量监控2',icon:Location},
    {title:'电量监控3',icon:Setting},
    {title:'电量监控4',icon:Document},
    {title:'电量监控5',icon:PictureFilled},
])

let chartOption1 = ref({
    title:{//标题
        text:'标题' ,
        letf:'center',  //居中
        textStyle:{
            color:'#fff', //标题颜色
            fontSize:18 //大小
        }
    },
    color: '#999',//柱颜色
    tooltip:{},
    legend:{//图例
        data:['库存量'],
        left:'left',
        textStyle:{
            color:'#fff',
        }
    },
    xAxis:{//x轴
        data: ['kc001','kc002','kc003','kc004','kc005','kc006'],
        axisLine:{ //坐标轴相关设置
            lineStyle:{ //轴线
                color:'#fff'
            }
        }
    },
    yAxis:{
        axisLine:{ //坐标轴相关设置
            lineStyle:{ //轴线
                color:'#fff'
            }
        }
    },//y轴
    series:[
        {
            name:'库存量',
            type: 'line',//图表类型
            data: [105,265,220,40,50,60]//图表数据
        }
    ],
    grid:{
        left:'2%',
        right:'2%',
        top:'13%',
        bottom:'2%',
        containLabel:true,//区域内是否包含坐标轴的刻度标签
    }
})

let chartOption2 = ref({
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      areaStyle: {}
    }
  ]
})

let chartOption3 = ref({
  title: {
    text: '销售占比'
  },
  legend: {
    data: ['Allocated Budget', 'Actual Spending']
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending'
        }
      ]
    }
  ]
})
</script>